<script setup lang="ts">
import {ref, watch, onMounted} from "vue";
//导入图标
import {
  Search,
  RefreshRight,
  Plus,
  EditPen,
  Delete,
  DocumentCopy,
  UploadFilled
} from '@element-plus/icons-vue'
import service from "@/utils/request.ts";


const searchInfo = ref<{
  label: string,
  key: string,
  value: string,
  type?: 'input' | 'select',
  options?: { label: string, value: string }[]
}[] | undefined>( [
  {
    label: '题目名称',
    key: 'questionName',
    value: ''
  },
  {
    label: '题目类型',
    key: 'questionType',
    value: '',
    type: 'select',
    options: [{
      value: '0',
      label: '单选'
    }, {
      value: '1',
      label: '多选'
    }]
  },
])

const loading = ref<boolean>(true)
const selectedItems = ref<boolean>(false)
const multipleSelection = ref<never[]>([])

const tableData = ref()
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = (val: number) => {
  pageSize.value = val
  queryData()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  queryData()
}
const handleSelectionChange = (val: never[]) => {
  multipleSelection.value = val
}
watch(multipleSelection, (val) => {
  selectedItems.value = val.length > 0
})
onMounted(() => {
  queryData()
})
const queryData = () => {
  const params = {}
  if (searchInfo.value) {
    searchInfo.value.forEach(item => {
      params[item.key] = item.value;
    })
  }
  params['pageNum'] = currentPage.value;
  params['pageSize'] = pageSize.value;
  service.request({
    url: "/api/exam/question/listQuestion",
    method: "get",
    params: params,
    data: null
  }).then((res) => {
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total

  }).finally(() => {
    loading.value = false
  })
}
const handleSearch = () => {
  currentPage.value = 1
  queryData()
}
const resetSearchInfo = () => {
  if (searchInfo.value) {
    searchInfo.value.forEach((item) => {
      item.value = ''
    })
    handleSearch()
  }
}
</script>

<template>
  <div class="app-table">
    <div v-if="searchInfo && searchInfo?.length > 0" class="app-table-search-bar">
      <div v-for="item in searchInfo" :key="item.key">
        <span class="app-table-search-bar-label">{{ item.label }}</span>
        <el-input v-if="item?.type == undefined || item?.type === 'input'" :placeholder="`请输入${item.label}`"
                  v-model="item.value" class="app-table-search-bar-input"></el-input>
        <el-select v-if="item.type === 'select'" :placeholder="`请选择${item.label}`" v-model="item.value" class="app-table-search-bar-input">
          <el-option v-for="item2 in item?.options" :key="item2.value" :label="item2.label" :value="item2.value">
          </el-option>
        </el-select>
      </div>

      <div>
        <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
        <el-button :icon="RefreshRight" @click="resetSearchInfo">重置</el-button>
      </div>
    </div>

    <div class="app-table-main">


      <div class="app-table-title">用户列表</div>

      <div class="app-table-action-bar">
        <el-button size="small" plain
                   :icon="Plus"
                   type="primary">创建
        </el-button>
        <el-button
          :disabled="multipleSelection?.length !== 1" size="small" plain :icon="EditPen"
          type="warning">修改
        </el-button>
        <el-button
          :disabled="!selectedItems"
          size="small" plain :icon="Delete" type="danger">删除
        </el-button>
        <el-button size="small"
                   plain
                   :icon="UploadFilled" type="info">导出
        </el-button>
        <el-button size="small"
                   plain
                   :icon="DocumentCopy" type="info">导入
        </el-button>
      </div>
      <div class="app-table-content">
        <el-table v-loading="loading" :data="tableData"
                  style="width: 100%"
                  @selection-change="handleSelectionChange" border stripe>
          <el-table-column type="selection" width="40"/>

          <el-table-column prop="id" label="编号" width="340" align="center"/>
          <el-table-column prop="questionName" label="题目名称" align="left"/>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button link type="primary" size="small">
                编辑
              </el-button>
              <el-button link type="danger" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="app-table-page">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                       :page-sizes="[10, 20, 50, 100, 200, 500, 1000]" :disabled="false"
                       :background="true"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>
